<template>
    <div>
      <el-card>

      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">

        <el-form-item label="是否有效" prop="conStatus">
          <el-select v-model="queryParams.conStatus" placeholder="请选择是否有效" clearable size="small">
            <el-option label="无效" value="0" />
            <el-option label="有效" value="1" />
          </el-select>
        </el-form-item>



        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['system:info:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['system:info:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['system:info:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system:info:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" @row-dblclick="dbClick" style="width: 100%" border :data="infoList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="首页图片"  align="center" prop="casePicurl" >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.casePicurl"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="案例名称"  align="center" prop="doorArea" />
        <el-table-column label="是否有效"  align="center" prop="conStatus" >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.conStatus === 0 ? 'primary' : 'success'"
              disable-transitions>{{scope.row.conStatus ===0 ? '无效' : '有效'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" prop="infoDesc"  />

        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:info:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:info:remove']"
            >删除</el-button>

            <!--<el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handletianjia(scope.row)"
              v-hasPermi="['system:info:remove']"
            >添加功能区</el-button>-->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleAddTwo(scope.row)"
              v-hasPermi="['system:info:remove']"
            >添加说明</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改施工案例对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">


          <el-form-item label="案例名称" prop="doorArea">
            <el-input type="textarea" v-model="form.doorArea" placeholder="请输入案例名称" />
          </el-form-item>

          <el-form-item label="描述" prop="infoDesc">
<!--            <el-input type="textarea" v-model="form.infoDesc" placeholder="请输入描述" />-->
            <QuillEditor v-model="form.infoDesc" @getChildrenStatus="getChildrenStatus"></QuillEditor>

          </el-form-item>

          <el-form-item label="图片URL" prop="casePicurl">
<!--            <el-input v-model="form.casePicurl" placeholder="请输入图片URL" />-->
            <el-upload
              class="upload-demo"
              :http-request="upload"
              action="aaa"
              accept=".jpg,.png"
              :limit="1"
              :file-list="casePicurl"
              :on-remove="handleRemoveInfoImage"
              :before-remove="beforeRemoveInfo"
              :on-error="handleError"
              ref="upload">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">仅支持jpg,png格式,以最新上传为准</div>
            </el-upload>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      </el-card>


    <!--<div :style="uuu">
      <el-card>
              <div align="center">
                <h2>功能区</h2>
              </div>
        <el-table v-loading="loading" border :data="infoListZi" @selection-change="handleSelectionChangeZi">
          <el-table-column type="selection" width="55" align="center" />
          &lt;!&ndash;<el-table-column label="功能D" align="center" prop="functionalId" />&ndash;&gt;
          &lt;!&ndash;<el-table-column label="施工案例ID" align="center" prop="caseId" />&ndash;&gt;
          <el-table-column label="施工案例功能区" align="center" prop="functionalName" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdateZi(scope.row)"
                v-hasPermi="['caseinfo:info:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDeleteZi(scope.row)"
                v-hasPermi="['caseinfo:info:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>



        &lt;!&ndash; 添加或修改施工案例功能区对话框 &ndash;&gt;
        <el-dialog :title="titleZi":visible.sync="openZi" width="500px" append-to-body>
          <el-form ref="formZi" :model="formZi" label-width="120px">
            &lt;!&ndash;<el-form-item label="施工案例ID" prop="caseId">&ndash;&gt;
              &lt;!&ndash;<el-input v-model="formZi.caseId" placeholder="请输入施工案例ID" />&ndash;&gt;
            &lt;!&ndash;</el-form-item>&ndash;&gt;
            <el-form-item label="施工案例功能区" prop="functionalName">
              <el-input type="textarea" v-model="formZi.functionalName" placeholder="请输入施工案例功能区" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormZi">确 定</el-button>
            <el-button @click="cancelZi">取 消</el-button>
          </div>
        </el-dialog>



      </el-card>
      </div>-->

      <div :style="mmm">
        <el-card>
          <div align="center">
            <h2>案例说明</h2>
          </div>
          <el-table v-loading="loading" border :data="instructionList" @selection-change="handleSelectionChangeTwo">
            <el-table-column type="selection" width="55" align="center" />
            <!--<el-table-column label="施工案例说明ID" align="center" prop="projectId" />-->
            <!--<el-table-column label="施工案例ID" align="center" prop="caseId" />-->
            <el-table-column label="施工案例说明" align="center" prop="projectName" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateTwo(scope.row)"
                  v-hasPermi="['system:instruction:edit']"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteTwo(scope.row)"
                  v-hasPermi="['system:instruction:remove']"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!--<pagination-->
            <!--v-show="total>0"-->
            <!--:total="total"-->
            <!--:page.sync="queryParamsTwo.pageNum"-->
            <!--:limit.sync="queryParamsTwo.pageSize"-->
            <!--@pagination="listInstruction"-->
          <!--/>-->


          <!-- 添加或修改施工案例说明对话框 -->
          <el-dialog :title="titleTwo" :visible.sync="openTwo" width="500px" append-to-body>
            <el-form ref="formTwo" :model="formTwo" label-width="130px">
              <!--<el-form-item label="施工案例ID" prop="caseId">-->
                <!--<el-input v-model="formTwo.caseId" placeholder="请输入施工案例ID" />-->
              <!--</el-form-item>-->
              <el-form-item label="施工案例说明" prop="projectName">
                <el-input v-model="formTwo.projectName" placeholder="请输入施工案例说明" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitFormTwo">确 定</el-button>
              <el-button @click="cancelTwo">取 消</el-button>
            </div>
          </el-dialog>

        </el-card>
      </div>


    </div>
</template>

<script>
  import { uploadImage } from "@/api/construction/strategy";

  import { shigonglistInfo,getCaseById,getInfo,getInfoCase,addInfoCase,updateInfoCase,delInfoCase,exportInfoCase,listZone, getZone, delZone, addZone, updateZone, exportZone, functionalZoneZi,listInstruction, getInstruction, delInstruction, addInstruction, updateInstruction  } from "@/api/construction/caseinfo";
  import QuillEditor from '@/components/Quill-editor';
    export default {
        name: "caseinfovue",
      components: {
        QuillEditor,
      },
      data() {
        return {
          casePicurl:[],
          uuu:'display:none',
          mmm:'display:none',
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          totalTwo: 0,
          // 施工案例表格数据
          infoList: [],
          // 功能区表格数据
          infoListZi: [],
          // 弹出层标题
          title: "",
          titleZi: "",
          titleTwo: "",
          // 施工案例说明表格数据
          instructionList: [],
          // 是否显示弹出层
          open: false,
          openZi: false,
          openTwo: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            constructionId: null,
            infoDesc: null,
            casePicurl: null,
            caseVideourl: null,
            conOrder: null,
            conStatus: null,
            modifiedTime: null,
            doorArea: null,
            decoratePrice: null,
            decorStyle: null,
            stylist: null,
            familyRoom: null,
            caseArea: null,
            caseName: null,
            caseWreathed: null,
            caseAcreage: null
          },
          queryParamsTwo: {
            pageNum: 1,
            pageSize: 10,
            caseId: null,
            projectName: null
          },
          tyepaa:"",
          // 表单参数
          formTwo: {
            numcaseId:'',
          },
          formZi: {
            numcaseId:'',
          },
          form: {
            numconstructionId:'',
          },
          // 表单校验
          rules: {
            constructionId: [
              { required: true, message: "施工队ID不能为空", trigger: "blur" }
            ],
            casePicurl: [
              { required: true, message: "图片URL不能为空", trigger: "blur" }
            ],
            caseVideourl: [
              { required: true, message: "视频URL不能为空", trigger: "blur" }
            ],
            conOrder: [
              { required: true, message: "排序不能为空", trigger: "blur" }
            ],
            conStatus: [
              { required: true, message: "是否有效：0无效 1有效不能为空", trigger: "blur" }
            ],
            modifiedTime: [
              { required: true, message: "最后修改时间不能为空", trigger: "blur" }
            ],
            doorArea: [
              { required: true, message: "户型面积不能为空", trigger: "blur" }
            ],
            familyRoom: [
              { required: true, message: "户型房间不能为空", trigger: "blur" }
            ],
          }
        };
      },
      created() {

        const constructionId = parseInt(this.$route.query.constructionId);
        console.log("***constructionId***"+constructionId)
          this.getInfo(constructionId);

      },

      methods: {
        upload(param){
          let file = param.file;
          let fileType = file.type;
          let isLt2M = file.size / 1024 / 1024 < 500;
          if (!isLt2M) {
            this.$message.error("上传大小大小必须小于500M");
            this.fileList=[];
            return;
          }
          let form = new FormData();
          form.append("file", file);
          uploadImage(form).then((res)=>{
            if(res.code==200){
              this.form.casePicurl = "http://51jhf.com/profile/xiazai/"+res.filePath;
            }
            // console.log(res);
          })
        },

        beforeRemoveInfo(file, InfoImgList) {
          return this.$confirm(`确定移除 ${file.name}？`);
        },
        //上传异常
        handleError(err, file, fileList){
          this.$message.error("上传失败");
        },

        getChildrenStatus: function(data){ // 实时更新子组件的变化
          this.form.infoDesc = data
        },


        handleUpdateTwo(row){
          this.resetTwo();
          this.openTwo=true;
          const projectId = row.projectId || this.ids
          getInstruction(projectId).then(res=>{
            this.formTwo = res.data;
            this.openTwo = true;
            this.titleTwo = "修改施工案例说明"
          });
        },
        handleAddTwo(row){
          this.resetTwo();
          this.openTwo=true;
          this.titleTwo ="添加施工案例说明";
          this.formTwo.numcaseId = row.caseId;
        },

        submitFormTwo(){
          this.$refs["formTwo"].validate(valid => {
            if (valid) {
              if (this.formTwo.projectId != null) {
                updateInstruction(this.formTwo).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.openTwo = false;
                  // this.listInstruction();
                }
              });
              } else {
                addInstruction(this.formTwo).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.openTwo = false;
                  // this.listInstruction();
                }
              });
              }
            }
          });
        },

        handletianjia(row){
            this.resetZi();
            this.openZi = true;
            this.titleZi = "添加施工案例功能区";
            this.formZi.numcaseId = row.caseId;
        },
        handleUpdateZi(row){
          this.resetZi();
          this.openZi = true;
          const functionalId = row.functionalId || this.ids
          getZone(functionalId).then(response => {
            this.formZi = response.data;
            this.openZi = true;
            this.titleZi = "修改施工案例功能区";
          });
        },

        submitFormZi(){
          this.$refs["formZi"].validate(valid => {
            if (valid) {
              if (this.formZi.functionalId != null) {
                updateZone(this.formZi).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.openZi = false;
                  this.functionalZoneZi(caseId);
                  this.dbClick();
                  this.dbClick(row);
                }
              });
              } else {
                addZone(this.formZi).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.openZi = false;
                  this.getList();
                  this.functionalZoneZi(caseId);
                  this.dbClick();
                  this.dbClick(row);
                }
              });
              }
            }
          });
        },


        dbClick(row){
          var caseId =row.caseId;
          this.functionalZoneZi(caseId);
          this.listInstruction(caseId);
        },


        functionalZoneZi(caseId){
          functionalZoneZi(caseId).then(res=>{
            this.infoListZi = res;
          this.uuu ='display:block';
        })
        },

        listInstruction(caseId){
          listInstruction(caseId).then(res=>{
            this.instructionList = res;
          this.mmm ='display:block';
          })
        },


          getInfo(constructionId){
            getInfo(constructionId).then(res=>{
              console.log("assaasas")
              this.queryParams.constructionId = res.data.constructionId;
              this.tyepaa = res.data.constructionId;
            this.getList();
            })
          },

        /** 查询施工案例列表 */
        getList() {
          this.loading = true;
          getCaseById(this.queryParams).then(response => {
            this.infoList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        },

        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },

        cancelZi() {
          this.openZi = false;
          this.resetZi();
        },
        cancelTwo(){
          this.openTwo = false;
          this.resetTwo();
        },
        // 表单重置
        resetTwo(){
          this.formTwo ={
            caseId: null,
            projectName:null,
          }
        },
        resetZi(){
          this.formZi ={
            caseId: null,
            functionalName:null,
          }
        },
        reset() {
          this.form = {
            caseId: null,
            constructionId: null,
            infoDesc: null,
            casePicurl: null,
            caseVideourl: null,
            conOrder: null,
            conStatus: 0,
            modifiedTime: null,
            doorArea: null,
            decoratePrice: null,
            decorStyle: null,
            stylist: null,
            familyRoom: null,
            caseArea: null,
            caseName: null,
            caseWreathed: null,
            caseAcreage: null
          };
          this.resetForm("form");
        },

        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.caseId)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },

      handleSelectionChangeTwo(selection) {
        this.ids = selection.map(item => item.projectId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },

        handleSelectionChangeZi(selection) {
          this.ids = selection.map(item => item.functionalId)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加施工案例";
          this.form.numconstructionId = parseInt(this.$route.query.constructionId);
          console.log("***********"+this.numconstructionId);
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
          this.reset();
          const caseId = row.caseId || this.ids
          getInfoCase(caseId).then(response => {
            this.form = response.data;
          this.open = true;
          this.title = "修改施工案例";
        });
        },


        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.caseId != null) {
                updateInfoCase(this.form).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
              } else {
                addInfoCase(this.form).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
              }
            }
          });
        },


        handleDeleteTwo(row) {
          const projectId = row.projectId || this.ids;
          this.$confirm('是否确认删除施工案例说明编号为"' + projectId + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delInstruction(projectId);
          }).then(() => {
            // this.listInstruction(caseId);
          this.msgSuccess("删除成功");
        }).catch(function() {});
        },

        handleDeleteZi(row) {
          const functionalId = row.functionalId || this.ids;
          this.$confirm('是否确认删除施工案例功能区编号为"' + functionalId + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delZone(functionalId);
          }).then(() => {
            this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const caseId = row.caseId || this.ids;
          this.$confirm('是否确认删除施工案例编号为"' + caseId + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delInfoCase(caseId);
          }).then(() => {
            this.getList();
          this.functionalZoneZi(caseId);
          this.msgSuccess("删除成功");
        }).catch(function() {});
        },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出所有施工案例数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return exportInfoCase(queryParams);
          }).then(response => {
            this.download(response.msg);
        }).catch(function() {});
        }



      }

    }
</script>

<style scoped>

</style>
